<template>
  <div class="list">
    <div class="list__title">附近店铺</div>
    <router-link
      v-for="item in list"
      :key="item._id"
      :to="`/shop/${item._id}`"
    >
      <ShopInfo
        :item="item"
        :hideBorder="false"
      />
    </router-link>
  </div>
</template>

<script>
import { ref } from 'vue'
import { get } from '../../utils/request'
import ShopInfo from '../../components/ShopInfo'
export default {
  name: 'NearBy',
  components: { ShopInfo },
  setup () {
    const list = ref([])
    const fetchList = async () => {
      const result = await get('/api/shop/hot-list')
      if (result?.errno === 0 && result?.data?.length) {
        list.value = result.data
      }
    }
    fetchList()

    return { list }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.list {
  margin-top: 0.16rem;
  &__title {
    margin-bottom: 0.14rem;

    font-size: 0.18rem;
    font-weight: bolder;
    color: $content-fontcolor;
  }
  a {
    text-decoration: none;
  }
}
</style>
